<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.body{
			
			transform-style: preserve-3d;
		}
		.cube{
			width: 100px;
			height: 100px;
			position: relative;
			transform-style: preserve-3d;
			transform:rotate3d(0, 1, 0, 90deg);
		}
		.cube>div{
			width: 100%;
			height: 100%;
			position: absolute;
		}
		.cube>div:nth-child(1){
			background-color: rgb(29, 0, 0);
			transform:translate3d(50px, 0, 0) rotate3d(0, 1, 0, 90deg);
		}
		.cube>div:nth-child(2){
			background-color: rgb(0, 136, 125);
			transform:translate3d(-50px, 0, 0) rotate3d(0, 1, 0, 90deg);
		}
		.cube>div:nth-child(3){
			background-color: rgb(0, 41, 155);
			transform:translate3d(0, 0,-50px) rotate3d(0, 0, 0, 90deg);
		}
		.cube>div:nth-child(4){
			background-color: rgb(0, 145, 55);
			transform:translate3d(0, 0,50px) rotate3d(0, 0, 0, 90deg);
		}
	</style>
</head>
<body>
	<div class="cube">
		<div>

		</div>
		<div>

		</div>
		<div>

		</div>
		<div>

		</div>

	</div>
</body>
</html>